*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
.wrapper{
  width: 1000px;
  margin: 0 auto;
}

//图片的飘忽不定的动画
@keyframes imgAnimation {
    0%{
      opacity: 1;
    }
  50%{
    opacity: .5;
  }
  100%{
    opacity: 1;
  }
}
/*头部导航栏*/
header>div{
  border-bottom: 1px solid #cececf;
  box-shadow: 0 0 5px #cececf inset;
}
.header-top{
  height: 70px;
  //background-color: #ffff00;
  img{
    height: 50px;
    display: inline-block;
    vertical-align: middle;
  }
  ul{
    display: inline-block;
    height: 70px;
    line-height: 70px;
    li{
      display: inline-block;
      margin-left: 50px;
      font-size: 18px;
      cursor: pointer;
      &>a{
        color: black;
        text-decoration: none;
      }
      &:hover{
        color: #fe5341;
      }
    }
    .active{
      color: #fe5341;
    }
  }
  //右侧登录按钮
  div{
    height: 70px;
    line-height: 70px;
    float: right;
    span{
      font-size: 28px;
      vertical-align: middle;
    }
    button{
      border: 1px solid red;
      color: red;
      height: 30px;
      width: 50px;
      border-radius: 5px;
      background-color: #fff;
      outline: none;
      margin-left: 35px;
    }
  }
}
/*音响图片*/
.header-pic{
  height: 300px;
  width: 100%;
  overflow: hidden;
  background: url("../img/original.jpg") no-repeat center top;
  div{
    position: relative;
      div{
        animation: move 1s linear forwards;
        position: absolute;
        top: -100px;
        right: -450px;
        float: right;
        text-align: right;
        h1{
          margin-top: 40px;
          color: white;
          font-size: 35px;
          font-weight: 250;
        }
        &>span{
          margin-top: 20px;
          display: inline-block;
          background: rgba(247, 246, 246,.3);
          color: white;
          //opacity: .4;
          padding: 8px 10px;
          margin-left: 5px;
        }
        p{
          margin-top: 15px;
          color: white;
          font-size: 18px;
        }
        button{
          width: 240px;
          height: 50px;
          outline: none;
          border-radius: 3px;
          background-color: #FE5341;
          color: white;
          border: none;
          font-size: 20px;
          margin-top: 10px;
          font-family: 宋体;
        }
      }
  }
}
/*轮播图部分*/
.rmsy{
  padding: 18px 0 16px;
  font-size: 20px;
  color: #474747;
  font-family: 微软雅黑;
  font-weight: bold;
}
.leftbtn{
  z-index: 20;
  position: absolute;
  top: 520px;
  left: 120px;
}
.rightbtn{
  z-index: 20;
  position: absolute;
  top: 530px;
  left: 1176px;
}
.leftbtn,.rightbtn{
  height: 78px;
  width: 37px;
  font-size: 10px;
  color: #ccc;
  border: none;
  outline: none;
  background-color: #fff;
  cursor: pointer;
}
.iconfont{
  //font-size: 60px !important;
}
.mian-viewpaper{
  top: 0px;
  width: 1000px;
  overflow: hidden;
  height: 300px !important;
  position: relative;

  //轮播图
  .viewpaper{
    position: absolute;
    top: 0;
    left: 0;
    width: 4010px;
    height: 288px;
    //background-color: #f00;

    ul{
      //width: 100%;
      //width: 1000px;
      display: inline-block;
      li{
        &:last-of-type{
          margin-right: 0;
        }
        display: inline-block;
        margin-right: 32px;
        height: 285px;
        width: 220px;
        //background-color: #ffff00;
        border-radius: 5px;
        overflow: hidden;
        img{
          width: 220px;
          height: 130px;
        }
        h2{
          text-align: center;
          font-size: 16px;
          height: 48px;
          font-weight: bold;
          color: #333;
        }

        .v-p1{
          text-align: center;
          &>span{
            padding: 2px 10px;
            font-size: 12px;
            margin: 0 5px;
            border: 1px solid #ff0000;
            border-radius: 5px;
            color: #f00;
          }
        }
        p{
          margin-top: 10px;
          text-align: center;
          span:nth-of-type(1){
            color: #fe5341;
          }
          span{
            color: black;
          }
        }
        .v-p2{
          margin-top: 10px;
          font-size: 14px;
          color: #fe5341;
        }
      }
    }
  }
}
/*报告精选*/
.select{
  margin-top: 10px;
  width: 100%;
  background-color: #F7F7F7;
    .select-pp{
      font-size: 20px;
      color: #474747;
      padding: 18px 0 16px;
      font-weight: bold;
    }
  .pic-items{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 526px;
    .items-1{
      border: 1px solid #ccc;
      width: 220px;
      height: 240px;
      //background-color: #3d80db;
      border-radius: 5px;
      overflow: hidden;
      img{
        width: 220px;
        height: 130px;
      }
      div{
        padding: 7px 10px 1px;
        p{
          font-size: 14px;
          height: 45px;
          overflow: hidden;
          word-break: break-all;
        }
        .susu{
          color: #a3a3a3;
          font-size: 12px;
          margin-top: 10px;
            span:nth-of-type(1){
              margin-right: 86px;
            }
            span{
              font-size: 12px;
            }
        }
      }
    }
  }
}
/*导购精选*/
.shops{
    div{
      p{
        font-size: 20px;
        color: #474747;
        padding: 18px 0 16px;
        font-weight: bold;
      }
      ul{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 282px;
        //background-color: #ba6b6b;
        li{
          width: 220px;
          height: 240px;
          //background-color: #5f83ae;
          border-radius: 3px;
          //overflow: hidden;
          border: 1px solid #ccc;
          img{
            width: 220px;
            height: 130px;
          }
          div{
            background: url("../img/listbg.jpg") no-repeat bottom left;
            background-size: 221px 19px;
            box-sizing: border-box;
            width: 220px;
            height: 121px;
            padding: 7px 10px 10px;
            &>p{
                font-size: 14px;
                color: #474747;
                font-weight: 200;
            }
            p:nth-of-type(2){
              margin-left: 150px;
              padding: 0;
              span{
                font-size: 12px;
              }

            }
          }
        }
      }
    }
}
/*发现酷玩*/
.find-w{
  background-color: #F7F7F7;
  .find-d{
        &>p{
          font-size: 20px;
          color: #474747;
          padding: 18px 0 16px;
          font-weight: bold;
        }
        .find-d-d{
          width: 100%;
          height: 1032px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .items-1{
            border: 1px solid #ccc;
            width: 220px;
            height: 240px;
            //background-color: #3d80db;
            border-radius: 5px;
            overflow: hidden;
            img{
              width: 220px;
              height: 130px;
            }
            img:hover{
              animation: imgAnimation .5s linear infinite;
            }
            div{
              padding: 7px 10px 1px;
              p{
                font-size: 14px;
                height: 45px;
                overflow: hidden;
                word-break: break-all;
              }
              .susu{
                color: #a3a3a3;
                font-size: 12px;
                margin-top: 10px;
                span:nth-of-type(1){
                  margin-right: 100px;
                  color: red;
                }
                span{
                  font-size: 12px;
                }
              }
            }
          }
        }
  }

}

//
/*底部*/
footer {
  width: 100%;
  height: 360px;
  background-color: #505050;

  .section {
    padding-top: 40px;

    .box {
      width: 100%;
      height: 280px;

      dl {

        padding-right: 20px;
        float: left;

        dt {
          color: #FFFFFF;
        }

        dd {
          font-size: 13px !important;
          color: #A3A3A3;
        }
        a{
          color: #a3a3a3;
          text-decoration: none;
        }
      }

    }

    p {

      text-align: center;
      color: #A3A3A3;
    }
  }
}

@keyframes move {
  0%{
  top: -100px;
  right: -450px;
}
100%{
  top: 0px;
  right: 0px;
}
}

